<template>
    <div id="container" class="amapdiv"></div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { onMounted, watch } from 'vue';
import Studycodemodel from '../mysql_interface/studycodemodel';

interface Imap {
    zoom?: number,
    center?: [number, number]
    level?: string
    depth?: number
    adCode?: number
    zIndex?: number
}

const p = withDefaults(defineProps<{ marker?: Studycodemodel.Iteamhome[], icon?: string, func: Function, mapoption?: Imap }>(), {
    func: () => { },
    mapoption: () => {
        return {
            zoom: 11,
            center: [116.357428, 39.96923],
            level: 'city',
            depth: 2,
            adCode: 110000,
            zIndex: 12
        }
    }

})


const map = shallowRef<any>(null);
async function initMap() {
    // const mask = await search()
    map.value = new AMap.Map("container", {  //设置地图容器id
        // mask,
        zoom: p.mapoption.zoom,           //初始化地图级别
        center: p.mapoption.center, //初始化地图中心点位置
        // viewMode: '3D', // 地图模式
        terrain: true // 开启地形图
    });
    map.value.setMapStyle('amap://styles/grey');
    initPro()
    initmarker()
}

function initmarker() {
    if (p.marker?.length) {
        map.value?.add(p.marker.map(t => {
            const mark = new AMap.Marker({
                position: new AMap.LngLat(t.longitude, t.dimension),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: t.school,
                icon: t.icon,

            });
            mark.dom.addEventListener('click', () => p.func(t.teamid))
            mark.dom.addEventListener('touchend', () => p.func(t.teamid))
            return mark
        }));
    }
}


function initPro() {
    const disProvince = new AMap.DistrictLayer.Province({
        zIndex: p.mapoption.zIndex,
        adcode: [p.mapoption.adCode],
        depth: p.mapoption.depth,
        level: 'city',

        styles: {
            'fill': function (properties: any) {
                // properties为可用于做样式映射的字段，包含
                // NAME_CHN:中文名称
                // adcode_pro
                // adcode_cit
                // adcode
                var adcode = properties.adcode;
                return getColorByAdcode(adcode);
            },
            'stroke-width': function (e) {
                if (e.type === 'Province_Border_China') {
                    return 2
                }
                return 1
            },
            'city-stroke': 'white', // 中国地级市边界
            'county-stroke': 'rgba(255,255,255,0.2)', // 中国区县边界
            'province-stroke': '#eb7137',

        }
    });

    disProvince.setMap(map.value);
}

// 颜色辅助方法
var colors: Record<number | string, number | string> = {};
var getColorByAdcode = function (adcode: number) {
    if (!colors[adcode]) {
        var gb = Math.random() * 120 + 50;
        colors[adcode] = 'rgba(' + gb + ',' + gb + ',255, 0.1)';
        // colors[adcode] = 'rgba(60,65,125, 122)';

    }

    return colors[adcode];
};


function search() {
    return new Promise(res => {

        var opts = {
            subdistrict: 0,
            extensions: 'all',
            level: 'city'
        };
        AMap.plugin('AMap.DistrictSearch', function () {
            var district = new AMap.DistrictSearch(opts);
            district.search('北京市', function (status, result) {
                if (result.districtList) {
                    var bounds = result.districtList[0].boundaries;
                    var mask = []
                    for (var i = 0; i < bounds.length; i += 1) {
                        mask.push([bounds[i]])
                    }
                    res(mask)
                }
            });
        })
    })
}

onMounted(() => {
    initMap()
})
</script>

<style>
.amapdiv {
    width: 100%;
    height: 100%;
    border: 1px solid #545E72;
    border-radius: 12px;
}

.amap-icon:hover {
    width: 36px !important;
    height: 36px !important;
    transition: all 0.3s;
}

.amapdiv .amap-icon img {
    width: 32px;
    transition: all 0.3s;

}

.amapdiv .amap-icon img:hover {
    width: 36px;
}
</style>
